<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <!--   <meta content="IE=edge" http-equiv="X-UA-Compatible"> -->
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <link href="ico/favicon.ico" rel="shortcut icon">

    <title>O.Push Backend</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- Bootstrap theme -->
    <!--  <link rel="stylesheet" href="css/bootstrap-theme.min.css"> -->

    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/dripicon.css">
    <link rel="stylesheet" href="css/typicons.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="js/tip/tooltipster.css">
    <link rel="stylesheet" type="text/css" href="js/vegas/jquery.vegas.css" />
    <link rel="stylesheet" type="text/css" href="js/number-progress-bar/number-pb.css">
	
	<link href="js/footable/css/footable.corecd98.css?v=2-0-1" rel="stylesheet" type="text/css" />
    <link href="js/footable/css/footable.standalone.css" rel="stylesheet" type="text/css" />
    <link href="js/footable/css/footable-demos.css" rel="stylesheet" type="text/css" />
    <!-- pace loader -->
    <script src="js/pace/pace.js"></script>
    <link href="js/pace/themes/orange/pace-theme-flash.css" rel="stylesheet" />



</head>

<body role="document">

    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

    <!-- TOPNAV -->

    <div class="row">
        <div class="col-lg-3">
            <ul class="nav navbar-nav navbar-left list-unstyled list-inline text-amber date-list">
                <li><i class="fontello-th text-amber"></i>
                </li>
                <li id="Date"></li>
            </ul>
            <ul class="nav navbar-nav navbar-left list-unstyled list-inline text-amber date-list">
                <li><i class="fontello-stopwatch text-amber"></i>
                </li>
                <li id="hours"></li>
                <li class="point">:</li>
                <li id="min"></li>
                <li class="point">:</li>
                <li id="sec"></li>
            </ul>


        </div>
        <div class="col-lg-6">
            <div style="margin-bottom:0;" class="alert text-white ">
                <span class="entypo-info-circled"></span>
                <strong>Wellcome back!</strong>&nbsp;&nbsp;Joe, your last loggin was 1 day ago. Have a nice day
            </div>
        </div>

    </div>
    <!-- END OF TOPNAV -->
    <!-- Comtainer -->
    <div class="container-fluid paper-wrap bevel tlbr">
        <div id="paper-top">
            <div class="row">
                <div class="col-sm-3 no-pad">

                    <a class="navbar-brand logo-text" href="#">O.Push Team Backend</a>

                    <ul class="list-unstyled list-inline noft-btn">
                        <li data-toggle="tooltip" data-placement="bottom" title="Log Out"> 
							<a href="login.html" class="text-white"><i class="icon-upload"></i></a>
                        </li>

                    </ul>
                </div>

                <div class="col-sm-6 no-pad">
                    <ul style="margin-top:8px;" class="nav navbar-nav navbar-left list-unstyled list-inline text-gray date-list news-list">
                        <!-- <li><i class="fontello-doc-text text-gray"></i>
                        </li> -->
                        <li>
                            <ul class="list-unstyled top-newsticker text-gray news-list">
                                <li><i class="fontello-cloud-flash-inv text-gray"></i>&nbsp;&nbsp;
                                    <strong>Noti title 1,</strong>noti body 1 &nbsp;<b>strong text</b>
                                </li>
                                <li><i class="fontello-cloud-sun-inv text-gray"></i>&nbsp;&nbsp;
                                    <strong>Noti title 2,</strong>noti body 2 &nbsp;<b>strong text</b>
                                </li>
                                <li><i class="fontello-rain-inv text-gray"></i>&nbsp;&nbsp;
                                    <strong>Noti title 3,</strong>noti body 3 &nbsp;<b>strong text</b>
                                </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </div>
        </div>

        <!-- SIDE MENU -->
        <div class="wrap-sidebar-content">
            <div id="skin-select">
                <a id="toggle">
                    <span class="fa icon-menu"></span>
                </a>

                <div class="skin-part">
                    <div id="tree-wrap">
                        <div class="side-bar">
                            <ul id="menu-showhide" class="topnav">
                                <li class="devider-title">
                                    <h3>
                                        <span>Menu</span>
                                    </h3>
                                </li>
                                <li>
                                    <a class="tooltip-tip" href="weixin_sdk.html" title="Weixin">
                                        <i class="fontello-desktop-1"></i>
                                        <span>Weixin SDKs Helper</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="tooltip-tip" href="net_sdk.html" title=".Net">
                                        <i class="fontello-desktop-1"></i>
                                        <span>.Net SDKs Helper</span>
                                    </a>
                                </li>
								<li class="active">
                                    <a class="tooltip-tip" href="dashboard_controls.html" title="Dashboard">
                                        <i class="fontello-desktop-1"></i>
                                        <span>Dashboard Controls</span>
                                    </a>
                                </li>
                                
                            </ul>
                            <div class="side-dash">
                                <h3>
                                    <span>Server Status</span>
                                </h3>
                                <ul class="side-dashh-list">
                                    <li>
                                        <!-- Task item -->
                                        <a href="#">
                                            <h3 class="fontello-leaf">
                                                Storage Status
                                                <small class="pull-right">35%</small>
                                            </h3>
                                            <div class="progress xs bg-opacity-one height-tiny">
                                                <div class="progress-bar bg-blue " style="width: 35%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                    <span class="sr-only">35% Complete</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- end task item -->
                                    <li>
                                        <!-- Task item -->
                                        <a href="#">
                                            <h3 class="fontello-box">
                                                CPU Usage
                                                <small class="pull-right">40%</small>
                                            </h3>
                                            <div class="progress xs bg-opacity-one height-tiny">
                                                <div class="progress-bar bg-aqua" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                    <span class="sr-only">40% Complete</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- end task item -->
                                </ul>
                                <div id="doughnutChart" class="chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #/skin-select -->
            <!-- END OF SIDE MENU -->

            <!-- Breadcrumb -->
            <div class="sub-board">
                <span class="header-icon"><i class="fontello-home"></i>
                </span>
                <ol class="breadcrumb newcrumb ng-scope">
                    <li>
                        <a href="#">
                            <span>
                            </span>Dashboard Controls</a>
                    </li>

                </ol>
            </div>
            <!-- End of Breadcrumb -->

		<!-- CONTENT -->
            <div class="wrap-fluid" id="paper-bg">

                <div class="row">
                    <div class="col-lg-4">
                        <div class="box">
                            <div class="box-header">
                                <!-- tools box -->
                                <div class="pull-right box-tools">
                                    <span class="box-btn bg-green"><i class="fontello-wrench-outline"></i>
                                    </span>

                                </div>
                                <h3 class="box-title"><i class="bg-green fontello-waves"></i> 
                                    <span class="text-green">Weave Loader</span>
                                </h3>
                            </div>
                            <div class="box-body">
                                <div class="loader"></div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>

                    <div class="col-lg-8">
                        <div class="box">
                            <div class="box-header">
                                <!-- tools box -->
                                <div class="pull-right box-tools">
                                    <span class="box-btn bg-green"><i class=" fontello-wrench-outline"></i>
                                    </span>

                                    <span class="box-btn bg-aqua" data-widget="collapse"><i class="fa fa-minus"></i>
                                    </span>
                                    <span class="box-btn bg-red" data-widget="remove"><i class="fa fa-times"></i>
                                    </span>
                                </div>
                                <h3 class="box-title"><i class="bg-aqua fontello-chart-alt-outline"></i> 
                                    <span class="text-aqua">Social Stat</span>
                                </h3>
                            </div>
                            <div class="box-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <tbody>
                                            <tr>
                                                <td style="width:180px">
                                                    <strong>Slider 1</strong>
                                                    <br>Caption 1
                                                </td>
                                                <td>
                                                    <div id="step">
                                                        <div style="margin: 15px 0 0;" class="number-pb">
                                                            <div class="number-pb-shown sun"></div>
                                                            <div class="number-pb-num">0/0</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width:100px">
                                                    <div class="pull-right text-red">
                                                        <small>$</small>7,086,050</div>
                                                    <br>
                                                    <small class="pull-right">21,00%</small>
                                                </td>
                                            </tr>
                                            <tr>

                                                <td>
                                                    <strong>Slider 2</strong>
                                                    <br>Caption 2</td>
                                                <td>
                                                    <div id="basic">
                                                        <div style="margin: 15px 0 0;" class="number-pb">
                                                            <div class="number-pb-shown"></div>
                                                            <div class="number-pb-num">0</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="pull-right text-green">
                                                        <small>$</small>1,346,232</div>
                                                    <br>
                                                    <small class="pull-right">56,00%</small>
                                                </td>
                                            </tr>
                                            <tr>

                                                <td>
                                                    <strong>Slider 3</strong>
                                                    <br>Caption 3</td>
                                                <td>
                                                    <div id="percentage">
                                                        <div style="margin: 15px 0 0;" class="number-pb">
                                                            <div class="number-pb-shown dream"></div>
                                                            <div class="number-pb-num">0%</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="pull-right text-aqua">
                                                        <small>$</small>3,734,858</div>
                                                    <br>
                                                    <small class="pull-right">78,00%</small>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="box">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="news-widget">
                                    <h2>
                                        <span class="bg-green">Today</span>
                                    </h2>
                                    <i class="fontello-shop-1"></i>
                                    <h4 class="text-green">832</h4>
                                    <h5>SALES</h5>
                                    <div style="clear:both;"></div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>

                    <div class="col-lg-6">
                        <div class="box">
                            <div class="box-body">
                                <div class="news-widget">
                                    <h2>
                                        <span class="bg-aqua">Today</span>
                                    </h2>
                                    <i class="fontello-cup"></i>
                                    <h4 class="text-aqua">76</h4>
                                    <h5>Visitors</h5>
                                    <div style="clear:both;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box -->
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="box">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="news-widget">
                                    <h2>
                                        <span class="bg-red">Last Month</span>
                                    </h2>
                                    <i class="fontello-money"></i>
                                    <h4 class="text-red">
                                        <small>$</small>8,475</h4>
                                    <h5>Earning</h5>
                                    <div style="clear:both;"></div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>

                    <div class="col-lg-6">
                        <div class="box">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="news-widget">
                                    <h2>
                                        <span class="bg-blue">Today</span>
                                    </h2>
                                    <i class="fontello-user-1"></i>
                                    <h4 class="text-blue">1645</h4>
                                    <h5>New User</h5>
                                    <div style="clear:both;"></div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-2">
                        <div class="content-bg  bg-green radius">
                            <div class="content-icon">
                                <i class="fontello-twitter text-white"></i>
                                <h2>5,455</h2>
                                <p>Card Sample</p>

                                <ul class="list-unstyled list-inline soc-widget">
                                    <li>
                                        <span class="fontello-pen"></span>
                                    </li>
                                    <li>
                                        <span class="fontello-loop-alt"></span>
                                    </li>
                                    <li>
                                        <span class=" fontello-post"></span>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="content-bg bg-aqua radius">

                            <div class="content-icon">
                                <i class="fontello-facebook text-white"></i>
                                <h2>182</h2>
                                <p>Card Sample</p>
                                <ul class="list-unstyled list-inline soc-widget">
                                    <li>
                                        <span class="fontello-pen"></span>
                                    </li>
                                    <li>
                                        <span class="fontello-loop-alt"></span>
                                    </li>
                                    <li>
                                        <span class=" fontello-post"></span>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="content-bg bg-red radius">

                            <div class="content-icon text-white">
                                <i class="fa fa-google-plus text-white"></i>
                                <h2>564</h2>
                                <p>Card Sample</p>
                                <ul class="list-unstyled list-inline soc-widget">
                                    <li>
                                        <span class="fontello-pen"></span>
                                    </li>
                                    <li>
                                        <span class="fontello-loop-alt"></span>
                                    </li>
                                    <li>
                                        <span class=" fontello-post"></span>
                                    </li>
                                </ul>


                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">


                        <div class="box">
                            <div class="box-header">
                                <!-- tools box -->
                                <div class="pull-right box-tools">
                                    <span class="box-btn bg-green"><i class="fontello-wrench-outline"></i>
                                    </span>

                                </div>
                                <div class="media direction">
                                    <span class="pull-left">
                                        <i class="media-object fontello-chart-alt-outline"></i>
                                    </span>
                                    <div class="media-body">
                                        <h5 style="margin:-2px 0 0" class="media-heading">Response</h5>
                                        <h4>From ORG 1</h4>
                                        <span class="pull-right"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body no-padding">

                                <ul class="list-unstyled newsticker">
                                    <li class="bg-red">
                                        <ul class="list-unstyled jalur-nest">
                                            <li>
                                                "Happy brithday to you hunny"
                                            </li>
                                            <li>
                                                <i class="fa fa-google-plus"></i>
                                                <i class="fontello-chronograph"></i>&nbsp;&nbsp;11 Menit 24 Detik</li>
                                        </ul>
                                    </li>

                                    <li class="bg-green">
                                        <ul class="list-unstyled jalur-nest ">
                                            <li>
                                                <strong>Jalur 2 : Tomang</strong>
                                            </li>
                                            <li>
                                                <i class="fontello-facebook"></i>
                                                <i class="fontello-chronograph"></i>&nbsp;&nbsp;23 Menit 53 Detik</li>
                                        </ul>
                                    </li>

                                    <li class="bg-aqua">
                                        <ul class="list-unstyled jalur-nest">
                                            <li>
                                                <strong>Jalur 3 : Cengkareng</strong>
                                            </li>
                                            <li>
                                                <i class="fontello-facebook"></i>
                                                <i class="fontello-chronograph"></i>&nbsp;&nbsp;45 Menit 23 Detik</li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <br>
                            </div>
                            <!-- /.box-body -->
                        </div>




                    </div>
                </div>



                <div class="row">
                    <div class="col-lg-4">
                        <div class="weather-wrap bg-amber">
                            <div class="row">
                                <div class="col-xs-12 no-pad">
                                    <div class="temperature bg-aqua"><b>Monday</b>, 07:30 AM
                                        <span>F&nbsp;&nbsp;</span>
                                        <span><b>C</b>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-4">
                                    <div class="weather-icon">
                                        <span>
                                            <canvas id="clear-day" width="75" height="75">
                                            </canvas>
                                        </span>

                                    </div>
                                </div>
                                <div class="col-xs-8">
                                    <div class="weather-text text-aqua">
                                        <h2>Denver
                                            <br><i>Clear Day</i>
                                        </h2>
                                    </div>

                                    <div class="weather-local text-red">
                                        <i class="fontello-temperatire"></i>
                                        <strong>18</strong>F

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-8">
                        <div class="weather-dash">
                            <div class="row">
                                <div class="col-sm-2">
                                    <div class="daily-weather">
                                        <h2>Mon</h2>
                                        <span>
                                            <canvas id="fog" width="60" height="60">
                                            </canvas>
                                        </span>
                                        <h3>65
                                            <small><i class="fontello-fahrenheit"></i>
                                            </small>
                                        </h3>
                                        <h5>15
                                            <i>km/h</i>
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="daily-weather">
                                        <h2>Tue</h2>
                                        <span>
                                            <canvas height="60" width="60" id="rain">
                                            </canvas>
                                        </span>
                                        <h3>65
                                            <small><i class="fontello-fahrenheit"></i>
                                            </small>
                                        </h3>

                                        <h5>12
                                            <i>km/h</i>
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="daily-weather">
                                        <h2>Wed</h2>
                                        <span>
                                            <canvas height="60" width="60" id="snow"></canvas>
                                        </span>
                                        <h3>83
                                            <small><i class="fontello-fahrenheit"></i>
                                            </small>
                                        </h3>

                                        <h5>14
                                            <i>km/h</i>
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="daily-weather">
                                        <h2>Thu</h2>
                                        <span>
                                            <canvas height="60" width="60" id="sleet">
                                            </canvas>
                                        </span>
                                        <h3>80
                                            <small><i class="fontello-fahrenheit"></i>
                                            </small>
                                        </h3>

                                        <h5>15
                                            <i>km/h</i>
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="daily-weather">
                                        <h2>Fri</h2>
                                        <span>
                                            <canvas height="60" width="60" id="wind"></canvas>
                                        </span>
                                        <h3>79
                                            <small><i class="fontello-fahrenheit"></i>
                                            </small>
                                        </h3>

                                        <h5>11
                                            <i>km/h</i>
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="daily-weather">
                                        <h2>Sat</h2>
                                        <span>
                                            <canvas height="60" width="60" id="partly-cloudy-day"></canvas>
                                        </span>
                                        <h3>82
                                            <small><i class="fontello-fahrenheit"></i>
                                            </small>
                                        </h3>

                                        <h5>10
                                            <i>km/h</i>
                                        </h5>
                                    </div>
                                </div>
                            </div>

                            <div style="clear:both;"></div>
                        </div>

                    </div>
                </div>
				 <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">

                                <h3 class="box-title">
                                    <span>Form Example</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <!-- form start -->
                                <form role="form">
                                    <div class="box-body">
                                        <div class="form-group">
                                            <label>Email address</label>
                                            <input type="email" class="form-control" placeholder="Enter email">
                                        </div>
                                        <div class="form-group">
                                            <label>Password</label>
                                            <input type="password" class="form-control" placeholder="Password">
                                        </div>
                                        <div class="form-group">
                                            <label>File input</label>
                                            <input type="file" id="exampleInputFile">
                                            <p class="help-block">Example block-level help text here.</p>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox">Check me out
                                            </label>
                                        </div>
                                    </div>
                                    <!-- /.box-body -->

                                    <div class="box-footer">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">

                                <h3 class="box-title">
                                    <span>Form Example</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <form class="form-inline" role="form">
                                    <div class="form-group">
                                        <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">@</div>
                                            <input class="form-control" type="email" placeholder="Enter email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="exampleInputPassword2">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox">Remember me
                                        </label>
                                    </div>
                                    <button type="submit" class="btn bg-green">Sign in</button>
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">

                                <h3 class="box-title">
                                    <span>Different Height</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <input class="form-control input-lg" type="text" placeholder=".input-lg">
                                <br/>
                                <input class="form-control" type="text" placeholder="Default input">
                                <br/>
                                <input class="form-control input-sm" type="text" placeholder=".input-sm">
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">

                                <h3 class="box-title">
                                    <span>Different Width</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <input type="text" class="form-control" placeholder=".col-xs-3">
                                    </div>
                                    <div class="col-xs-4">
                                        <input type="text" class="form-control" placeholder=".col-xs-4">
                                    </div>
                                    <div class="col-xs-5">
                                        <input type="text" class="form-control" placeholder=".col-xs-5">
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control input-lg" placeholder=".col-lg-3">
                                    </div>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control input-lg" placeholder=".col-lg-4">
                                    </div>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control input-lg" placeholder=".col-lg-5">
                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>




                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">

                                <h3 class="box-title">
                                    <span>Input Addon</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <form class="bs-example bs-example-form" role="form">
                                    <div class="input-group">
                                        <span class="input-group-addon">@</span>
                                        <input type="text" class="form-control" placeholder="Username">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <input type="text" class="form-control">
                                        <span class="input-group-addon">.00</span>
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">$</span>
                                        <input type="text" class="form-control">
                                        <span class="input-group-addon">.00</span>
                                    </div>
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">

                                <h3 class="box-title">
                                    <span>Button Addon</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <form class="bs-example bs-example-form">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="input-group">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">Go!</button>
                                                </span>
                                                <input type="text" class="form-control">
                                            </div>
                                            <!-- /input-group -->
                                        </div>
                                        <!-- /.col-lg-6 -->
                                        <div class="col-lg-6">
                                            <div class="input-group">
                                                <input type="text" class="form-control">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">Go!</button>
                                                </span>
                                            </div>
                                            <!-- /input-group -->
                                        </div>
                                        <!-- /.col-lg-6 -->
                                    </div>
                                    <!-- /.row -->
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">

                                <h3 class="box-title">
                                    <span>Segmented Buttons</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <form class="bs-example bs-example-form" role="form">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="input-group">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-default" tabindex="-1">Action</button>
                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                                        <span class="caret"></span>
                                                        <span class="sr-only">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Action</a>
                                                        </li>
                                                        <li><a href="#">Another action</a>
                                                        </li>
                                                        <li><a href="#">Something else here</a>
                                                        </li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <input type="text" class="form-control">
                                            </div>
                                            <!-- /.input-group -->
                                        </div>
                                        <!-- /.col-lg-6 -->
                                        <div class="col-lg-6">
                                            <div class="input-group">
                                                <input type="text" class="form-control">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-default" tabindex="-1">Action</button>
                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                                        <span class="caret"></span>
                                                        <span class="sr-only">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                        <li><a href="#">Action</a>
                                                        </li>
                                                        <li><a href="#">Another action</a>
                                                        </li>
                                                        <li><a href="#">Something else here</a>
                                                        </li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!-- /.input-group -->
                                        </div>
                                        <!-- /.col-lg-6 -->
                                    </div>
                                    <!-- /.row -->
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>



                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">

                                <h3 class="box-title">
                                    <span>General Elements</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <form role="form">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label>Text</label>
                                        <input type="text" class="form-control" placeholder="Enter ..." />
                                    </div>
                                    <div class="form-group">
                                        <label>Text Disabled</label>
                                        <input type="text" class="form-control" placeholder="Enter ..." disabled/>
                                    </div>

                                    <!-- textarea -->
                                    <div class="form-group">
                                        <label>Textarea</label>
                                        <textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label>Textarea Disabled</label>
                                        <textarea class="form-control" rows="3" placeholder="Enter ..." disabled></textarea>
                                    </div>

                                    <!-- input states -->
                                    <div class="form-group has-success">
                                        <label class="control-label" for="inputSuccess"><i class="fa fa-check"></i> Input with success</label>
                                        <input type="text" class="form-control" id="inputSuccess" placeholder="Enter ..." />
                                    </div>
                                    <div class="form-group has-warning">
                                        <label class="control-label" for="inputWarning"><i class="fa fa-warning"></i> Input with warning</label>
                                        <input type="text" class="form-control" id="inputWarning" placeholder="Enter ..." />
                                    </div>
                                    <div class="form-group has-error">
                                        <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> Input with error</label>
                                        <input type="text" class="form-control" id="inputError" placeholder="Enter ..." />
                                    </div>

                                    <!-- checkbox -->
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" />Checkbox 1
                                            </label>
                                        </div>

                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" />Checkbox 2
                                            </label>
                                        </div>

                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" disabled/>Checkbox disabled
                                            </label>
                                        </div>
                                    </div>

                                    <!-- radio -->
                                    <div class="form-group">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that&mdash;be sure to include why it's great
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled/>Option three is disabled
                                            </label>
                                        </div>
                                    </div>

                                    <!-- select -->
                                    <div class="form-group">
                                        <label>Select</label>
                                        <select class="form-control">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                            <option>option 3</option>
                                            <option>option 4</option>
                                            <option>option 5</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Select Disabled</label>
                                        <select class="form-control" disabled>
                                            <option>option 1</option>
                                            <option>option 2</option>
                                            <option>option 3</option>
                                            <option>option 4</option>
                                            <option>option 5</option>
                                        </select>
                                    </div>

                                    <!-- Select multiple-->
                                    <div class="form-group">
                                        <label>Select Multiple</label>
                                        <select multiple class="form-control">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                            <option>option 3</option>
                                            <option>option 4</option>
                                            <option>option 5</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Select Multiple Disabled</label>
                                        <select multiple class="form-control" disabled>
                                            <option>option 1</option>
                                            <option>option 2</option>
                                            <option>option 3</option>
                                            <option>option 4</option>
                                            <option>option 5</option>
                                        </select>
                                    </div>

                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>
				<div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">
                                <!-- tools box -->
                                <div class="pull-right box-tools">

                                    <span class="box-btn" data-widget="collapse"><i class="fa fa-minus"></i>
                                    </span>
                                    <span class="box-btn" data-widget="remove"><i class="fa fa-times"></i>
                                    </span>
                                </div>
                                <h3 class="box-title"><i class="fontello-doc"></i> 
                                    <span>Footable Filtering</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="row" style="margin-bottom:10px;">
                                    <div class="col-sm-4">
                                        <input class="form-control" id="filter" placeholder="Search..." type="text" />
                                    </div>
                                    <div class="col-sm-2">
                                        <select class="filter-status form-control">
                                            <option value="active">Active</option>
                                            <option value="disabled">Disabled</option>
                                            <option value="suspended">Suspended</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-6">

                                        <a href="#clear" style="margin-left:10px;" class="pull-right btn bg-red clear-filter" title="clear filter">clear</a>
                                        <a href="#api" class="pull-right btn bg-red filter-api" title="Filter using the Filter API">filter API</a>



                                    </div>

                                </div>

                                <table id="footable-res2" class="demo" data-filter="#filter" data-filter-text-only="true">
                                    <thead>
                                        <tr>
                                            <th data-toggle="true">
                                                First Name
                                            </th>
                                            <th>
                                                Last Name
                                            </th>
                                            <th data-hide="phone,tablet">
                                                Job Title
                                            </th>
                                            <th data-hide="phone,tablet">
                                                DOB
                                            </th>
                                            <th data-hide="phone">
                                                Status
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Isidra</td>
                                            <td><a href="#">Boudreaux</a>
                                            </td>
                                            <td>Traffic Court Referee</td>
                                            <td data-value="78025368997">22 Jun 1972</td>
                                            <td data-value="1">
                                                <span class="status-metro status-active" title="Active">Active</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Shona</td>
                                            <td>Woldt</td>
                                            <td><a href="#">Airline Transport Pilot</a>
                                            </td>
                                            <td data-value="370961043292">3 Oct 1981</td>
                                            <td data-value="2">
                                                <span class="status-metro status-disabled" title="Disabled">Disabled</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Granville</td>
                                            <td>Leonardo</td>
                                            <td>Business Services Sales Representative</td>
                                            <td data-value="-22133780420">19 Apr 1969</td>
                                            <td data-value="3">
                                                <span class="status-metro status-suspended" title="Suspended">Suspended</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Easer</td>
                                            <td>Dragoo</td>
                                            <td>Drywall Stripper</td>
                                            <td data-value="250833505574">13 Dec 1977</td>
                                            <td data-value="1">
                                                <span class="status-metro status-active" title="Active">Active</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Maple</td>
                                            <td>Halladay</td>
                                            <td>Aviation Tactical Readiness Officer</td>
                                            <td data-value="694116650726">30 Dec 1991</td>
                                            <td data-value="3">
                                                <span class="status-metro status-suspended" title="Suspended">Suspended</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Maxine</td>
                                            <td><a href="#">Woldt</a>
                                            </td>
                                            <td><a href="#">Business Services Sales Representative</a>
                                            </td>
                                            <td data-value="561440464855">17 Oct 1987</td>
                                            <td data-value="2">
                                                <span class="status-metro status-disabled" title="Disabled">Disabled</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Lorraine</td>
                                            <td>Mcgaughy</td>
                                            <td>Hemodialysis Technician</td>
                                            <td data-value="437400551390">11 Nov 1983</td>
                                            <td data-value="2">
                                                <span class="status-metro status-disabled" title="Disabled">Disabled</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Lizzee</td>
                                            <td><a href="#">Goodlow</a>
                                            </td>
                                            <td>Technical Services Librarian</td>
                                            <td data-value="-257733999319">1 Nov 1961</td>
                                            <td data-value="3">
                                                <span class="status-metro status-suspended" title="Suspended">Suspended</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Judi</td>
                                            <td>Badgett</td>
                                            <td>Electrical Lineworker</td>
                                            <td data-value="362134712000">23 Jun 1981</td>
                                            <td data-value="1">
                                                <span class="status-metro status-active" title="Active">Active</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Lauri</td>
                                            <td>Hyland</td>
                                            <td>Blackjack Supervisor</td>
                                            <td data-value="500874333932">15 Nov 1985</td>
                                            <td data-value="3">
                                                <span class="status-metro status-suspended" title="Suspended">Suspended</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <br>


                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>
            <!-- #/paper bg -->
        </div>
        <!-- ./wrap-sidebar-content -->
		
		

        <!-- / END OF CONTENT -->
           

        <!-- FOOTER -->
        <div id="footer">
            <div class="devider-footer-left"></div>
            <div class="time">
                <p id="spanDate"></p>
                <p id="clock"></p>
            </div>
            <div class="copyright">Copyright &copy; <a href="http://www.opush.mobi/">O.Push Team</a> Made with <i class="fontello-heart-filled text-red"></i>
            </div>
            <div class="devider-footer"></div>
            <ul>
            </ul>
        </div>
        <!-- / FOOTER -->
    </div>
    <!-- Container -->

    <!-- 
    ================================================== -->
    <!-- Main jQuery Plugins -->
    <script type='text/javascript' src="js/jquery.js"></script>
    <script type='text/javascript' src='js/bootstrap.js'></script>
    <script type='text/javascript' src='js/date.js'></script>
    <script type='text/javascript' src='js/slimscroll/jquery.slimscroll.js'></script>
    <script type='text/javascript' src='js/jquery.nicescroll.min.js'></script>
    <!--  minimize setting -->
    <script type='text/javascript' src='js/sliding-menu-minimize.js'></script>
    <!--  end minimize setting -->
    <script type='text/javascript' src='js/scriptbreaker-multiple-accordion-1.js'></script>
    <script type='text/javascript' src='js/tip/jquery.tooltipster.min.js'></script>
    <script type='text/javascript' src="js/donut-chart/jquery.drawDoughnutChart.js"></script>
    <script type='text/javascript' src="js/tab/jquery.newsTicker.js"></script>
    <script type='text/javascript' src="js/tab/app.ticker.js"></script>
    <script type='text/javascript' src='js/app.js'></script>

    <script type='text/javascript' src='js/vegas/jquery.vegas.js'></script>
    <script type='text/javascript' src='js/image-background.js'></script>
    <script type="text/javascript" src="js/jquery.tabSlideOut.v1.3.js"></script>
    <script type="text/javascript" src="js/bg-changer.js"></script>


    <script type='text/javascript' src="js/number-progress-bar/jquery.velocity.min.js"></script>
    <script type='text/javascript' src="js/number-progress-bar/number-pb.js"></script>
    <script src="js/loader/loader.js" type="text/javascript"></script>
    <script src="js/loader/demo.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/skycons/skycons.js"></script>

    <!-- TAB SLIDER -->

    <script src="js/chartist/chartist.min.js"></script>
	<script src="js/footable/js/footablecd98.js?v=2-0-1" type="text/javascript"></script>
    <script src="js/footable/js/footable.sortcd98.js?v=2-0-1" type="text/javascript"></script>
    <script src="js/footable/js/footable.filtercd98.js?v=2-0-1" type="text/javascript"></script>
    <script src="js/footable/js/footable.paginatecd98.js?v=2-0-1" type="text/javascript"></script>
    <script src="js/footable/js/footable.paginatecd98.js?v=2-0-1" type="text/javascript"></script>

    <script>
    //Weather Icons
    (function($) {
        "use strict";
        var icons = new Skycons({
                "stroke": 0.08,
                "color": "Gray",
                "cloudColor": "#65C3DF",
                "sunColor": "#0090d9",
                "moonColor": "DodgerBlue",
                "rainColor": "RoyalBlue",
                "snowColor": "LightGray",
                "windColor": "LightSteelBlue",
                "fogColor": "#65C3DF"
            }),
            list = [
                "clear-day", "clear-night", "partly-cloudy-day",
                "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                "fog"
            ],
            i;

        for (i = list.length; i--;)
            icons.set(list[i], list[i]);
        icons.play();
    })(jQuery);

    //Animation Slider
    $(function() {
        function randomPercentage() {
            return Math.floor(Math.random() * 100);
        }

        function randomInterval() {
            var min = Math.floor(Math.random() * 30);
            var max = min + (Math.floor(Math.random() * 40) + 70);
            return [min, max];
        }

        function randomStep() {
            return Math.floor(Math.random() * 10) + 5;
        }

        // setup
        var $basic = $('#basic');
        var interval = randomInterval();
        var basicBar = $basic.find('.number-pb').NumberProgressBar({
            style: 'basic',
            min: interval[0],
            max: interval[1]
        })
        $basic.find('.title span').text('[Min: ' + interval[0] + ', Max: ' + interval[1] + ']');

        var percentageBar = $('#percentage .number-pb').NumberProgressBar({
            style: 'percentage'
        })

        var $step = $('#step');
        var maxStep = randomStep()
        var stepBar = $('#step .number-pb').NumberProgressBar({
            style: 'step',
            max: maxStep
        })
        $step.find('.title span').text('[Max step: ' + maxStep + ']');

        // loop
        var basicLoop = function() {
            basicBar.reach(undefined, {
                complete: percentageLoop
            });
        }

        var percentageLoop = function() {
            percentageBar.reach(undefined, {
                complete: stepLoop
            });
        }

        var stepLoop = function() {
            stepBar.reach(undefined, {
                complete: basicLoop
            });
        }

        // start
        basicLoop();
    });
	(function($) {
        "use strict";
        $('.footable-res').footable();
    })(jQuery);

    (function($) {
        "use strict";
        $('#footable-res2').footable().bind('footable_filtering', function(e) {
            var selected = $('.filter-status').find(':selected').text();
            if (selected && selected.length > 0) {
                e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                e.clear = !e.filter;
            }
        });

        $('.clear-filter').click(function(e) {
            e.preventDefault();
            $('.filter-status').val('');
            $('table.demo').trigger('footable_clear_filter');
        });

        $('.filter-status').change(function(e) {
            e.preventDefault();
            $('table.demo').trigger('footable_filter', {
                filter: $('#filter').val()
            });
        });

        $('.filter-api').click(function(e) {
            e.preventDefault();

            //get the footable filter object
            var footableFilter = $('table').data('footable-filter');

            alert('about to filter table by "tech"');
            //filter by 'tech'
            footableFilter.filter('tech');

            //clear the filter
            if (confirm('clear filter now?')) {
                footableFilter.clearFilter();
            }
        });
    })(jQuery);
    </script>






</body>
</html>
